<template>
  <div class="zdypzddWord">
    <div class="header">
      <tabsBox :modelData="modelData" :list="tabsList" @click="tabsClickFun" :loading="true"></tabsBox>
    </div>

    <a-card style="margin: 15px 0;border-radius: 20px;">
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="loadData">
          <a-row :gutter="24">
            <a-col :md="8" :sm="12">
              <a-form-model-item label="部门" prop="proId">
<!--                <a-tree-select
                  v-model="queryParam.proId"
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="proTreeData"
                  placeholder="请选择部门"
                  treeNodeFilterProp="title"
                  @change="proIdChange"
                  @search="searchBy"
                  :showSearch="true"
                ></a-tree-select>-->
                <j-select-depart
                  v-model="queryParam.proId"
                  :multi="false"
                  type="all"
                  :backDepart="true"
                  @back="backDepartInfo"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="12">
              <a-form-model-item label="查询时段" prop="time">
                <a-range-picker
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  v-model="queryParam.Time"
                  @change="handleDatechange"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" :loading="runJudge"
                          @click="loadData" icon="search">查询</a-button>
                <a-button type="primary" :loading="runJudge"
                          style="margin-left: 10px;"
                          @click="exportCustomData" icon="download">导出</a-button>
                <a-button type="primary" :loading="runJudge"
                          style="margin-left: 10px;"
                          @click="multiProjectVisible = true" icon="download">导出多项目</a-button>
                <a-button type="primary" style="margin-left: 10px;" @click="runReset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>

    <div v-if="modelId == 'gdmx_xcjfjgfx'" class="contentBox">
      <a-row class="structBox">
        <a-row class="structBoxRow" v-for="(rowItem, rowIndex) in xcjfjgfxColumns">
          <template v-for="(colItem, colIndex) in rowItem">
            <a-col :span="4">
              <a-col class="structBoxTitle child" :span="14">
                <div class="struct-content"> {{ colItem.title }}</div>
              </a-col>
              <a-col class="structBoxValue child" :span="10">
                <div class="struct-content"> {{ colItem.value }}</div>
              </a-col>
            </a-col>
          </template>
        </a-row>
      </a-row>
    </div>

    <div class="contentBox">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        @change="handleTableChange"
        :scroll="{x: true, y: 300}"
      >

      </a-table>
      <a-pagination v-if="dataSource && dataSource.length"
                    style="margin-top: 10px;text-align: right;margin-right: 10px;"
                    v-model="ipagination.current"
                    :page-size-options="ipagination.pageSizeOptions"
                    :total="ipagination.total"
                    show-size-changer
                    :page-size="ipagination.pageSizeNow"
                    @change="handleTableChange"
                    @showSizeChange="handleTableSizeChange"
      ></a-pagination>
    </div>

    <div class="contentBox">
      <div class="contentTitle">
        <i class="contentTitleIcon"></i>疑点
      </div>
      <div class="contentSub" v-html="ydmsContent"></div>
    </div>

    <!-- 基本信息 弹窗 -->
    <a-modal
      :width="1000"
      title="基本信息"
      :visible="basicInformationVisible"
      @cancel="basicInformationVisible = false;basicInformationEdit = false;"
    >
      <div class="basicInformation">
        <a-icon type="form" v-if="!basicInformationEdit" @click="basicInformationEditEvent" title="编辑"
                style="font-size: 20px;" class="basicInformationEditIcon" />
        <div class="basicInformationItem" v-for="(item, index) in basicInformationData" :key="index">
          <div class="basicInformationItemHeader">
            <i class="basicInformationItemHeaderIcon"></i>
            <div class="basicInformationItemHeaderTxt">{{ item.title }}</div>
          </div>
          <div class="basicInformationItemContent">
            <template v-if="!basicInformationEdit"><span>{{ item.content }}</span></template>
            <template v-else>
              <template v-if="item.value == 'ydmsMb'">
                <div class="ydmsEditBox">
                  <div class="selectNodeItem" :key="idx" @click="clickSelectNode(itm, index)"
                       v-for="(itm, idx) in selectNodeList">{{ itm.fieldCnName }}
                  </div>
                </div>
                <a-textarea ref="ydmsTextarea"
                            v-model="item.content" @blur="handleBlur"
                            :auto-size="{ minRows: 3, maxRows: 5 }"
                />
              </template>
              <template v-else>
                <a-textarea
                  v-model="item.content"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                />
              </template>
            </template>
          </div>
          <div class="basicInformationItemLine" v-if="index != (basicInformationData.length - 1)"></div>
        </div>
      </div>
      <template slot="footer">
        <div class="basicInformationFooter">
          <a-button v-if="basicInformationEdit"
                    @click="basicInformationEditCancel" style="margin-right: 15px;">
            取消
          </a-button>
          <a-button @click="basicInformationEditOk"
                    type="primary" v-if="basicInformationEdit">
            保存
          </a-button>
        </div>
      </template>
    </a-modal>

    <!-- 疑点规则 弹窗 -->
    <a-modal
      :width="800"
      title="疑点规则"
      :visible="doubtfulPointRulesVisible"
      :footer="false"
      @cancel="doubtfulPointRulesVisible = false"
    >
      <div class="doubtfulPointRulesItem" v-for="(item, index) in doubtfulPointRulesData" :key="index">
        {{ item }}
      </div>
    </a-modal>

    <!-- 数据完整性 弹窗 -->
    <a-modal
      :width="600"
      title="数据完整性"
      :visible="dataIntegrityVisible"
      :footer="false"
      @cancel="dataIntegrityVisible = false;dataIntegrityData = [];"
    >
      <a-spin :spinning="dataIntegrityLoading">
        <template v-if="!dataIntegrityLoading">
          <div class="dataIntegrityItem" v-for="(item, index) in dataIntegrityData" :key="index">
            <div class="dataIntegrityItemL">
              <i class="dataIntegrityItemIcon" :class="{'dataIntegrityItemIcon_isUpload':item.status}"></i>
              <div class="dataIntegrityItemTxt">{{ item.name }}</div>
            </div>
            <div class="dataIntegrityItemBtn" v-if="item.status"
                 @click="getDataList(item, index)">查看
            </div>
          </div>
          <div class="dataIntegrityBtn">
            <a-button @click="exportAllTemplateByModelId">导出</a-button>
          </div>
        </template>
      </a-spin>
    </a-modal>

    <!-- 项目画像 弹窗 -->
    <a-modal
      :width="1100"
      title="项目画像"
      :visible="projectPortraitVisible"
      :footer="false"
      @cancel="projectPortraitVisible = false"
      class="projectPortraitModal"
    >
      <div class="projectPortraitBox">
        <div class="projectPortraitItem projectPortraitNormal">
          <div class="projectPortraitItem_header">
            <div class="projectPortraitItem_headerTitle">
              <span class="projectPortraitItem_headerT1">01</span>
              <span class="projectPortraitItem_headerT2">基本信息</span>
            </div>
          </div>
          <div class="projectPortraitItem_con projectPortraitItem_con1">
            <div class="projectPortraitItem_content1T">
              项目名称：中铁七局郑州公司郑开城际延长线项目经理部
            </div>
            <div class="projectPortraitItem_content1T">
              业主单位：中铁七局郑州公司郑开城际延长线项目经理部
            </div>
            <div class="projectPortraitItem_con1Box">
              <div class="projectPortraitItem_con1BoxItem">
                <div class="projectPortraitItem_con1BoxItemT1">项目类型</div>
                <div class="projectPortraitItem_con1BoxItemT2">基建</div>
              </div>
              <div class="projectPortraitItem_con1BoxItem">
                <div class="projectPortraitItem_con1BoxItemT1">合同金额</div>
                <div class="projectPortraitItem_con1BoxItemT2">1000 万元</div>
              </div>
              <div class="projectPortraitItem_con1BoxItem">
                <div class="projectPortraitItem_con1BoxItemT1">合同工期</div>
                <div class="projectPortraitItem_con1BoxItemT2">1652 日</div>
              </div>
            </div>
          </div>
        </div>
        <div class="projectPortraitItem projectPortraitEconomicBenefits">
          <div class="projectPortraitItem_header">
            <div class="projectPortraitItem_headerTitle">
              <span class="projectPortraitItem_headerT1">02</span>
              <span class="projectPortraitItem_headerT2">经济效益情况</span>
            </div>
          </div>
          <div class="projectPortraitItem_con projectPortraitItem_con2">
            <div class="projectPortraitItem_con2Item"
                 v-for="(item, index) in economicBenefitsList" :key="index">
              <div class="projectPortraitItem_con2ItemTitle">
                {{ item.title }}
              </div>
              <div class="projectPortraitItem_con2ItemSub">
                <div class="projectPortraitItem_con2ItemSubItem">
                  <div class="projectPortraitItem_con2ItemSubItemT1">{{ item.data1.title }}</div>
                  <div class="projectPortraitItem_con2ItemSubItemT2">{{ item.data1.value }}</div>
                </div>
                <div class="projectPortraitItem_con2ItemSubIcon">+</div>
                <div class="projectPortraitItem_con2ItemSubItem">
                  <div class="projectPortraitItem_con2ItemSubItemT1">{{ item.data1.title }}</div>
                  <div class="projectPortraitItem_con2ItemSubItemT2">{{ item.data1.value }}</div>
                </div>
                <div class="projectPortraitItem_con2ItemSubIcon">=</div>
                <div class="projectPortraitItem_con2ItemSubItem">
                  <div class="projectPortraitItem_con2ItemSubItemT1">{{ item.data1.title }}</div>
                  <div class="projectPortraitItem_con2ItemSubItemT2">{{ item.data1.value }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="projectPortraitItem projectPortraitAssetsLiabilities">
          <div class="projectPortraitItem_header">
            <div class="projectPortraitItem_headerTitle">
              <span class="projectPortraitItem_headerT1">03</span>
              <span class="projectPortraitItem_headerT2">资产负债情况</span>
            </div>
          </div>
          <div class="projectPortraitItem_con projectPortraitItem_con3">
            <a-row :gutter="15">
              <a-col class="projectPortraitItem_con3Sub" :span="16">
                <div class="projectPortraitItem_con3Table">资产</div>
                <div class="projectPortraitItem_con3TableData"
                     :style="{
                  'grid-template-columns': `repeat(${assetsLiabilitiesData1.length}, 1fr)`
                  }">
                  <div class="projectPortraitItem_con3TableDataItem"
                       v-for="(item, index) in assetsLiabilitiesData1"
                       :key="index">
                    <div class="projectPortraitItem_con3TableDataItemT1">{{ item.title }}</div>
                    <div class="projectPortraitItem_con3TableDataItemT2">{{ item.value }}</div>
                  </div>
                </div>
              </a-col>
              <a-col class="projectPortraitItem_con3Sub" :span="8">
                <div class="projectPortraitItem_con3Table">资产</div>
                <div class="projectPortraitItem_con3TableData"
                     :style="{
                  'grid-template-columns': `repeat(${assetsLiabilitiesData2.length}, 1fr)`
                  }">
                  <div class="projectPortraitItem_con3TableDataItem"
                       v-for="(item, index) in assetsLiabilitiesData2"
                       :key="index">
                    <div class="projectPortraitItem_con3TableDataItemT1">{{ item.title }}</div>
                    <div class="projectPortraitItem_con3TableDataItemT2">{{ item.value }}</div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 导出多项目 弹窗 -->
    <a-modal
      :width="600"
      title="导出多项目"
      :visible="multiProjectVisible"
      @cancel="multiProjectVisible = false;multiProjectData = {}"
      @ok="exportMultiProject"
    >
      <a-form-model ref="ruleForm" :model="multiProjectData"
                    :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-form-model-item label="部门" prop="pro">
          <j-select-depart
            v-model="multiProjectData.pro"
            :multi="true"
            type="all"
            :backDepart="true"
            @back="backDepartInfo2"
          />
        </a-form-model-item>
        <a-form-model-item label="查询时段" prop="time">
          <a-range-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
            v-model="multiProjectData.time"
            @change="handleMultiProjectDatechange"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import tabsBox from './components/tabsBox.vue'
import { getAction, postAction, putAction } from '@/api/manage'
import step from './components/step.vue'
import { queryMyDeptTreeByParentIds } from '@/api/api'

export default {
  name: 'zdypzdd',
  components: { step, tabsBox },
  data() {
    return {
      modelId: null,
      modelData: {},
      queryParam: {
        // id proId proName startTime endTime
      },
      rules: {
        proId: [{ required: true, message: '请选择部门', trigger: 'change' }]
      },
      // 组织树数据
      proDefaultTreeData: [],
      proTreeData: [],
      /* 分页参数 */
      ipagination: {
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        current: 1,
        pageSize: 11,
        pageSizeNow: 10,
        total: 0
      },
      stepList: [],
      stepCurrentNum: -1,
      columns: [],
      dataSource: [],
      proSearchValue: null,
      // 表头
      tabsList: [
        { title: '模型说明', img: require('@/assets/new_modal/5.png') },
        { title: '模型配置', img: require('@/assets/new_modal/4.png') },
        { title: '数据完整性', img: require('@/assets/new_modal/2.png') },
        { title: '项目画像', img: require('@/assets/new_modal/16.png') }
      ],
      basicInformationVisible: false,
      basicInformationData: [
        { value: 'mxdy', title: '模型定义' },
        { value: 'sjal', title: '实际案例' },
        { value: 'sjwt', title: '审计问题' },
        { value: 'wtdx', title: '问题定性' },
        { value: 'ydmsMb', title: '疑点' }
      ],
      basicInformationEdit: false,
      doubtfulPointRulesVisible: false,
      doubtfulPointRulesData: [],
      dataIntegrityVisible: false,
      dataIntegrityData: [],
      projectPortraitVisible: false,
      economicBenefitsList: [
        {
          title: '收入',
          data1: { title: '账面收入', value: '1000万元' },
          data2: { title: '审计调整', value: '1000万元' },
          data3: { title: '实际收入', value: '2000万元' }
        },
        {
          title: '成本',
          data1: { title: '账面成本', value: '1000 万元' },
          data2: { title: '审计调整', value: '1000 万元' },
          data3: { title: '实际成本', value: '2000 万元' }
        },
        {
          title: '利润',
          data1: { title: '账面利润', value: '1000 万元' },
          data2: { title: '审计调整', value: '1000 万元' },
          data3: { title: '实际利润', value: '2000 万元' }
        },
        {
          title: '利润率',
          data1: { title: '账面利润率', value: '100.00%' },
          data2: { title: '审计调整', value: '100.00%' },
          data3: { title: '实际利润率', value: '100.00%' }
        },
        {
          title: '潜盈潜亏',
          data1: { title: '账面潜盈潜亏', value: '1000 万元' },
          data2: { title: '审计调整', value: '1000 万元' },
          data3: { title: '实际潜盈潜亏', value: '2000 万元' }
        }
      ],
      assetsLiabilitiesData1: [
        { title: '货币资金', value: '1000万元' },
        { title: '应收账款', value: '1000万元' },
        { title: '营收票据', value: '1000万元' },
        { title: '存货', value: '1000万元' },
        { title: '合同资产', value: '1000万元' },
        { title: '预付账款', value: '1000万元' }
      ],
      assetsLiabilitiesData2: [
        { title: '货币资金', value: '1000万元' },
        { title: '应收账款', value: '1000万元' },
        { title: '营收票据', value: '1000万元' }
      ],
      runJudge: false,
      cursorPos: 0,
      selectNodeList: [],
      multiProjectVisible: false,
      multiProjectData: {},
      url: {
        // 查询模型详情
        queryById: '/sjmx2/modelTemplateConfig/queryById',
        queryByIdAndDeptId: 'sjmx2/modelTemplateConfig/queryByIdAndDeptId',
        // 查询模型步骤信息
        queryList: '/sjmx2/modelTemplateStep/queryList',
        // 查询指定步骤的输出指标 表头
        queryTitle: '/sjmx2/modelTemplateOutIndex/queryTitle',
        // 执行
        // run: '/sjmx2/modelTemplateConfig/run',
        run: '/sjmx2/modelTemplateRun/runData',
        // 重置
        runReset: '/sjmx2/modelTemplateRun/runReset',
        //  导出输出指标
        exportCustomData: '/sjmx2/modelTemplateRun/exportCustomData',
        searchBy: 'sys/sysDepart/searchBy',
        runTotal: '/sjmx2/modelTemplateRun/runTotal',
        queryTemplateData: '/sjmx2/modelTemplateCollectConfig/queryTemplateData',
        queryTemplateData2: '/sjmx2/modelTemplateCollectConfig/queryTemplateData2',
        editModelTemplateConfig: '/sjmx2/modelTemplateConfig/edit',
        // 导出数据完整性
        exportAllTemplateByModelId: '/sjmx2/modelTemplateConfig/exportAllTemplateByModelId',
        // 查看可选择节点
        querySelectNode: '/sjmx2/modelTemplateOutIndex/querySelectNode',
        // 单模型多项目
        exportMoreProData: '/sjmx2/modelTemplateRun/exportMoreProData',
        xcjfjgfx:'/sjmx2/modelTemplateRun/runOther',
        addConclusion: '/sjmx2/modelTemplatePointSort/addConclusion',
      },
      dataIntegrityLoading: false,
      ydmsContent: null,
      xcjfjgfxColumns: [
        [
          { title: '较定编超编人数', key: 'jdbcbrs', value: '' },
          { title: '责任成本预算\n现场经费占比', key: 'zrcbysxcjfzb', value: '' },
          { title: '人员超编账面增加\n现场经费', key: 'rycbzmzjxcjf', value: '' },
          { title: '人员超编实际增加\n现场经费', key: 'rycbsjzjxcjf', value: '' },
          { title: ' ', key: '', value: ' ' },
          { title: ' ', key: '', value: ' ' }
        ], [
          { title: '账面现场经费责任\n成本节（+）超（-）', key: 'zmxcjfzrcbjc', value: '' },
          { title: '账面现场经费\n占收入比', key: 'zmxcjfzsrb', value: '' },
          { title: '账面较责任成本计价人均现场经费节（+）超（-）', key: 'zmjzrcbjjrjxcjfjc', value: '' },
          { title: '账面现场经费\n月人均支出', key: 'zmxcjfyrjzc', value: '' },
          { title: '账面较责任预算现场经费月人均现场经费节超', key: 'zmjzrysxcjfyrjxcjfjc', value: '' },
          { title: '账面月人均超支\n增加现场经费', key: 'zmyrjczzjxcjf', value: '' }
        ], [
          { title: '实际现场经费责任成本节（+）超（-）', key: 'sjxcjfzrcbjc', value: '' },
          { title: '实际现场经费\n占收入比', key: 'sjxcjfzsrb', value: '' },
          { title: '实际较责任成本计价人均现场经费节（+）超（-）', key: 'sjjzrcbjjrjxcjfjc', value: '' },
          { title: '实际现场经费\n月人均支出', key: 'sjxcjfyrjzc', value: '' },
          { title: '实际较责任预算现场经费月人均现场经费节超', key: 'sjjzrysxcjfyrjxcjfjc', value: '' },
          { title: '实际月人均超支\n增加现场经费', key: 'sjyrjczzjxcjf', value: '' }
        ]
      ],
      confirmLoading:false,
    }
  },
  created() {
    const { id } = this.$route.query
    this.modelId = id
    this.queryById()
    this.queryList()
    this.queryTitle()
    // this.queryMyDeptTreeByParentIds()
    // this.queryTemplateData();
  },
  methods: {
    handleMultiProjectDatechange(e) {
      if (e && e.length) {
        this.$set(this.multiProjectData, 'startTime', e[0])
        this.$set(this.multiProjectData, 'endTime', e[1])
      } else {
        this.$set(this.multiProjectData, 'startTime', null)
        this.$set(this.multiProjectData, 'endTime', null)
      }
      console.log(e, this.multiProjectData, 'handleMultiProjectDatechange')
    },
    exportMultiProject() {
      let that = this
      if (this.runJudge) {
        this.$message.error('禁止重复点击,请稍后重试')
        return
      }
      if (!this.multiProjectData.proId) {
        this.runJudge = false
        this.$message.error('请选择部门')
        return
      }
      this.runJudge = true
      let params = {
        id: this.modelId,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize - 1,
        stepOrder: -1,
        // stepOrder: this.stepCurrentNum,
        ...this.multiProjectData
      }
      this.multiProjectVisible = false
      getAction(this.url.exportMoreProData, params).then((res) => {
        this.runJudge = false
        if (res.code == 200) {
          let url = `${window._CONFIG['domianURL']}/sys/common/download` + res.result.path
          window.open(url, '_target')

          that.$confirm({
            content: '是否将结论导出到疑点梳理里？',
            onOk() {
              return new Promise((resolve, reject) => {
                postAction(that.url.addConclusion, { ids: params.id,taskId:res.result.taskId, ...params }).then((res) => {
                  if (res.success) {
                    that.multiProjectData = {}
                    that.$message.success('导出到疑点成功')
                    that.$destroyAll()
                    setTimeout(() => {
                      that.$router.push({ name: 'ydsl' })
                    }, 100)
                  } else {
                    that.$destroyAll()
                    that.$message.error(res.message)
                  }
                  resolve()
                })
              })

              /*postAction(that.url.addConclusion, { ids: params.id, ...params }).then((res) => {
                if (res.success) {
                  that.multiProjectData = {}
                  that.$message.success('导出到疑点成功')
                  that.$destroyAll()
                  setTimeout(() => {
                    that.$router.push({ name: 'ydsl' })
                  }, 100)
                } else {
                  that.$destroyAll()
                  that.$message.error(res.message)
                }
              })*/
            },
            cancelText: '取消',
            onCancel() {
              that.multiProjectData = {}
              that.$destroyAll()
            }
          })
        }
      })
    },
    runReset() {
      this.queryParam = {}
      this.dataSource = []
      this.runJudge = false
      this.ydmsContent = null
      this.$set(this.ipagination, 'total', 0)
      this.$set(this.ipagination, 'current', 1)
      let params = {
        id: this.modelId
      }
      postAction(this.url.runReset, params).then((res) => {
        if (res.code == 200) {
        }
      })
    },
    handleBlur(e) {
      this.cursorPos = e.srcElement.selectionStart
    },
    clickSelectNode(data, index) {
      let value = this.basicInformationData[index].content
      if (value === undefined) { // 输入内容为空，直接插入
        this.$set(this.basicInformationData[index], 'content', `{${data.fieldCnName}}`)
      } else {
        const start = value.substring(0, this.cursorPos || 0),
          end = value.substring(this.cursorPos || 0)
        this.$set(this.basicInformationData[index], 'content', `${start}{${data.fieldCnName}}${end}`)
      }
    },
    querySelectNode() {
      let params = {
        id: this.modelId
      }
      getAction(this.url.querySelectNode, params).then((res) => {
        if (res.code == 200) {
          this.selectNodeList = res.result
        }
      })
    },
    exportAllTemplateByModelId() {
      getAction(this.url.exportAllTemplateByModelId, { ids: this.modelId }).then((res) => {
        this.$message.success('正在下载，请稍等！')
        let url = `${window._CONFIG['domianURL']}/sys/common/download/${res.result}`
        window.open(url, '_blank')
      })
    },
    getDataList(data, index) {
      let fileUrl = `${window._CONFIG['onlinePreviewFileURL']}/sys/common/download${data.path}`
      // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileUrl)}`
      let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileUrl))}`
      window.open(url, '_blank')
    },
    basicInformationEditOk() {
      let jbxx = {}
      for (let item of this.basicInformationData) {
        jbxx[item.value] = item.content
      }
      let params = {
        id: this.modelId,
        jbxx: JSON.stringify(jbxx),
        ydmsMb: jbxx['ydmsMb'] || ''
      }
      putAction(this.url.editModelTemplateConfig, params).then((res) => {
        if (res.code == 200) {
          this.$message.success('保存成功')
          this.basicInformationEdit = false
        }
      })
    },
    basicInformationEditCancel() {
      this.basicInformationEdit = false
      for (let item of this.basicInformationData) {
        this.$set(item, 'content', item.defaultContent)
      }
    },
    basicInformationEditEvent() {
      this.basicInformationEdit = true
    },
    queryTemplateData() {
      getAction(this.url.queryTemplateData, { id: this.modelId }).then((res) => {
        if (res.code == 200) {
          this.dataIntegrityData = res.result
        }
      })
    },

    /** 新接口 **/
    queryTemplateData2() {
      if (!this.queryParam.proId) {
        this.$message.error('请选择部门')
        return
      }

      this.dataIntegrityLoading = true
      this.dataIntegrityVisible = true
      getAction(this.url.queryTemplateData2, {
        id: this.modelId,
        deptId: this.queryParam.proId
      }).then((res) => {
        if (res.code == 200) {
          this.dataIntegrityLoading = false
          this.dataIntegrityData = res.result
        } else {
          this.dataIntegrityLoading = false
          this.dataIntegrityVisible = false
          this.$message.error(res.message)
        }
      })
    },

    runTotal() {
      let params = {
        id: this.modelId,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize - 1,
        stepOrder: -1,
        // stepOrder: this.stepCurrentNum,
        ...this.queryParam
      }
      postAction(this.url.runTotal, params).then((res) => {
        if (res.code == 200) {
          this.dataSource.push(res.result)
          this.queryById()
        }
      })
    },
    tabsClickFun(e) {
      if (e == 0) {
        this.querySelectNode()
        this.basicInformationVisible = true
      } else if (e == 1) {
        if (this.modelData.category == 0) {
          this.$router.push('/zdypzbb?id=' + this.modelId)
        }
        // this.doubtfulPointRulesVisible = true;
      } else if (e == 2) {
        this.queryTemplateData2()
      } else if (e == 3) {
        this.projectPortraitVisible = true
      }
    },
    changeStepVal(data, idx) {
      if (this.stepCurrentNum == idx) {
        return
      }
      this.stepCurrentNum = idx
      this.queryTitle()
      if (this.queryParam.proId) {
        this.loadData()
      }
    },
    exportCustomData() {
      if (this.runJudge) {
        this.$message.error('禁止重复点击,请稍后重试')
        return
      }
      if (!this.queryParam.proId) {
        this.runJudge = false
        this.$message.error('请选择部门')
        return
      }
      this.runJudge = true
      let params = {
        id: this.modelId,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize - 1,
        stepOrder: -1,
        // stepOrder: this.stepCurrentNum,
        ...this.queryParam
      }
      getAction(this.url.exportCustomData, params).then((res) => {
        this.runJudge = false
        if (res.code == 200) {
          // let fileName = res.result.split('/')[res.result.split('/').length - 1];
          let url = `${window._CONFIG['domianURL']}/sys/common/download` + res.result
          window.open(url, '_target')
          // let link = document.createElement('a')
          // link.style.display = 'none'
          // link.href = url
          // link.setAttribute('download', fileName)
          // document.body.appendChild(link)
          // link.click()
          // document.body.removeChild(link) //下载完成移除元素
          // window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    handleTableSizeChange(page, pageSize) {
      this.$set(this.ipagination, 'pageSize', pageSize + 1)
      this.$set(this.ipagination, 'current', page)
      this.$set(this.ipagination, 'pageSizeNow', pageSize)
      this.loadData()
    },
    handleTableChange(pagination, filters, sorter) {
      this.$set(this.ipagination, 'current', pagination)
      // TODO 筛选
      // this.ipagination = pagination
      this.loadData()
    },
    loadData() {
      if (this.runJudge) {
        this.$message.error('禁止重复点击,请稍后重试')
        return
      }
      if (!this.queryParam.proId) {
        this.runJudge = false
        this.$message.error('请选择部门')
        return
      }
      this.runJudge = true
      if (this.modelData.secondTitle == 1) {
        this.queryTitle()
      }
      let params = {
        id: this.modelId,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize - 1,
        stepOrder: -1,
        ...this.queryParam
      }
      postAction(this.url.run, params).then((res) => {
        this.xcjfjgfxColumns.forEach(group => {
          group.forEach(item => {
            item.value = '';
          });
        });
        this.runJudge = false
        if (res.code == 200) {
          this.$message.success(res.message)
          this.dataSource = res.result.records
          // let total = res.result.total + parseInt(res.result.total / this.ipagination.pageSizeNow);
          let total = res.result.total
          this.$set(this.ipagination, 'total', total)
          this.runTotal()
          this.queryContent()
          if(this.modelId == 'gdmx_xcjfjgfx'){
            this.getXcjfjgfx()
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },

    getXcjfjgfx(){
      let params = {
        id: this.modelId,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize - 1,
        stepOrder: -1,
        ...this.queryParam
      }
      postAction(this.url.xcjfjgfx, params).then((res) => {
        if (res.code == 200) {
          this.xcjfjgfxColumns.forEach(group => {
            group.forEach(item => {
              item.value = res.result[item.key];
            });
          });
        } else {
          this.$message.error(res.message)
        }
      })
    },
    proIdChange(value, label) {
      this.$set(this.queryParam, 'proName', label[0])
    },

    backDepartInfo(info) {
      this.$set(this.queryParam, 'proName', info.map(item => item.text).join(','))
    },

    multiProjectDataProIdChange(value) {
      this.$set(this.multiProjectData, 'proId', value.map(item => item.value).join(','))
      this.$set(this.multiProjectData, 'proName', value.map(item => item.label).join(','))
    },

    backDepartInfo2(info) {
      this.$set(this.multiProjectData, 'proId', info.map(item => item.value).join(','))
      this.$set(this.multiProjectData, 'proName', info.map(item => item.text).join(','))
    },

    handleDatechange(e) {
      if (e && e.length) {
        this.$set(this.queryParam, 'startTime', e[0])
        this.$set(this.queryParam, 'endTime', e[1])
      } else {
        this.$set(this.queryParam, 'startTime', null)
        this.$set(this.queryParam, 'endTime', null)
      }
    },
    queryMyDeptTreeByParentIds() {
      queryMyDeptTreeByParentIds().then((res) => {
        if (res.code == 0) {
          this.proDefaultTreeData = res.result
          this.proTreeData = res.result
        }
      })
    },
    searchBy(e) {
      if (!e) {
        this.proTreeData = this.proDefaultTreeData
        return
      }
      getAction(this.url.searchBy + '?keyWord=' + e).then((res) => {
        if (res.code == 0) {
          this.proTreeData = res.result || []
        }
      })
    },
    queryById() {
      getAction(this.url.queryById, { id: this.modelId }).then((res) => {
        if (res.code == 200) {
          this.modelData = res.result
          /*let ydms = res.result.ydms ? res.result.ydms.replace(/\/\\n/g, '<br />') : ''

          this.$set(this.modelData, 'ydms', null)
          if(!isInit){
            // ydms = ydms.split('/\\n').join('');
            this.$set(this.modelData, 'ydms', ydms|| '暂无')
          }*/

          let jbxx = JSON.parse(res.result.jbxx ? res.result.jbxx : '{}')
          console.log(jbxx, 'jbxxjbxxjbxx')
          for (let key in jbxx) {
            for (let i = 0; i < this.basicInformationData.length; i++) {
              let item = this.basicInformationData[i]
              if (item.value == key) {
                this.$set(this.basicInformationData[i], 'content', jbxx[key])
                this.$set(this.basicInformationData[i], 'defaultContent', jbxx[key])
              }
            }
          }
          this.doubtfulPointRulesData = [res.result.ydgz]
        }
      })
    },

    queryContent() {
      this.ydmsContent = null
      getAction(this.url.queryByIdAndDeptId, { id: this.modelId, deptId: this.queryParam.proId }).then((res) => {
        if (res.code == 200) {
          let ydms = res.result.ydms ? res.result.ydms.replace(/\/\\n/g, '<br />') : ''
          this.ydmsContent = ydms || '暂无'
        }
      })
    },

    queryList() {
      getAction(this.url.queryList, { modelId: this.modelId }).then((res) => {
        if (res.code == 200) {
          this.stepList = res.result
          this.stepCurrentNum = this.stepList[this.stepList.length - 1].stepOrder
        }
      })
    },
    queryTitle() {
      postAction(this.url.queryTitle, {
        proName: this.queryParam.proName,
        id: this.modelId,
        stepOrder: -1
      }).then((res) => {
        if (res.code == 200) {
          let columns = [{
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: (t, r, index) => {
              return this.dataSource.length != (parseInt(index) + 1) ? parseInt(index) + 1 : '总计'
            }
          }]
          for (let i = 0; i < res.result.length; i++) {
            let item = res.result[i]
            columns.push({
              title: item.fieldCnName,
              key: item.fieldEnName,
              dataIndex: item.fieldEnName,
              align: 'center',
              width: 150
            })
          }
          this.columns = columns
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>
.zdypzddWord {
  height: 100%;

  .header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    height: 60px;
  }

  .modelBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 270px;
    height: 100%;
    background-color: #3154A4;
    overflow: hidden;
  }

  .modelIcon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url('../../../assets/new_modal/6.png');
  }

  .modelName {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    max-width: 80%;
    max-height: 100%;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #FFFFFF;;
    text-align: center;
    line-height: normal;
    letter-spacing: normal;
  }

  .step {
    box-sizing: border-box;
    padding: 0 10px;
    width: calc(100% - 270px);
    height: 100%;
  }

  .contentBox {
    margin-top: 20px;
    box-sizing: border-box;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;

    ::v-deep .ant-table .ant-table-header-column div {
      // white-space: nowrap;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow-wrap: break-word;
      word-break: break-all;
      -webkit-line-clamp: 3; /* 显示两行 */
      line-clamp: 3; /* 适用于部分浏览器 */
    }
  }

  .contentTitle {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: #3154A5;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: normal;

    .contentTitleIcon {
      display: inline-block;
      margin-right: 10px;
      width: 4px;
      height: 14px;
      background-color: rgba(49, 84, 165, 1);
    }
  }

  .contentSub {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #D7D7D7;
  }
}

.basicInformation {
  position: relative;

  .basicInformationEditIcon {
    position: absolute;
    top: -15px;
    right: 0;
  }
}

.basicInformationItem {
  .basicInformationItemHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .basicInformationItemHeaderIcon {
    display: inline-block;
    width: 6px;
    height: 18px;
    background-color: rgba(49, 84, 164, 1);
    margin-right: 10px;
  }

  .basicInformationItemHeaderTxt {
    font-size: 18px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
    line-height: normal;
  }

  .basicInformationItemContent {
    margin-top: 15px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
    font-size: 14px;
    text-align: left;
    line-height: 25px;
  }

  .basicInformationItemLine {
    width: 100%;
    height: 1px;
    background-color: #3154A4;
    margin: 15px 0;
  }

  .ydmsEditBox {
    .selectNodeItem {
      cursor: pointer;
      display: inline-block;
      padding: 4px 8px;
      border-radius: 8px;
      border: 1px solid #eeeeee;
      margin-right: 10px;
      margin-bottom: 10px;
      transition: all .3s;

      &:hover {
        color: #3e3e3e;
        border-color: #3e3e3e;
        background-color: #eeeeee;
      }
    }
  }
}

.basicInformationFooter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.doubtfulPointRulesItem {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-align: left;
  letter-spacing: normal;
  color: #333333;
  text-indent: 2em;
  line-height: 25px;
}

.dataIntegrityItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  .dataIntegrityItemL {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .dataIntegrityItemIcon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: url('../../../assets/new_modal/u1146.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .dataIntegrityItemIcon_isUpload {
    background-image: url('../../../assets/new_modal/u11.svg');
  }

  .dataIntegrityItemTxt {
    font-size: 14px;
    text-align: left;
    line-height: normal;
    letter-spacing: normal;
    color: #333333;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .dataIntegrityItemBtn {
    cursor: pointer;
    color: #3154A4;
    font-size: 14px;
    text-align: left;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: normal;
  }
}

.dataIntegrityBtn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .table-page-search-wrapper .ant-form-inline .ant-form-item {
  margin-bottom: 0;
}

::v-deep .table-page-search-wrapper .table-page-search-submitButtons {
  margin-bottom: 0;
}

.projectPortraitModal {
  ::v-deep .ant-modal-body {
    padding-left: 0;
  }
}

.projectPortraitItem {
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }
}

.projectPortraitItem_header {
  margin-bottom: 15px;

  .projectPortraitItem_headerTitle {
    display: flex;
    align-items: center;
    width: 165px;
    height: 30px;
    padding-left: 18px;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    & > span {
      font-size: 16px;
      color: #FFFFFF;
      white-space: nowrap;
      text-transform: none;
      line-height: normal;
      letter-spacing: normal;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .projectPortraitItem_headerT1 {
      margin-right: 12px;
    }
  }
}

.projectPortraitNormal {
  .projectPortraitItem_headerTitle {
    background-image: url('../../../assets/new_modal/u118.svg');
  }
}

.projectPortraitEconomicBenefits {
  .projectPortraitItem_headerTitle {
    background-image: url('../../../assets/new_modal/u122.svg');
  }
}

.projectPortraitAssetsLiabilities {
  .projectPortraitItem_headerTitle {
    background-image: url('../../../assets/new_modal/u126.svg');
  }
}

.projectPortraitItem_con {
  padding-left: 30px;
}

.projectPortraitItem_con1 {
  .projectPortraitItem_content1T {
    font-size: 14px;
    line-height: 25px;
    letter-spacing: normal;
    color: #333333;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .projectPortraitItem_con1Box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 10px;
    padding: 15px;
    width: 100%;
    border-radius: 3px;
    background-color: rgba(48, 83, 162, 0.09);
  }

  .projectPortraitItem_con1BoxItem {
    text-align: center;
    border-right: 1px solid #3154A4;

    &:last-child {
      border-right: none;
    }

    .projectPortraitItem_con1BoxItemT1 {
      margin-bottom: 15px;
      white-space: nowrap;
      text-transform: none;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 700;
      font-style: normal;
      color: #3154A4;
      font-size: 14px;
      letter-spacing: normal;
      line-height: normal;
    }

    .projectPortraitItem_con1BoxItemT2 {
      font-size: 14px;
      white-space: nowrap;
      text-transform: none;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: normal;
      color: #333333;
      line-height: normal;
    }
  }
}

.projectPortraitItem_con2 {
  .projectPortraitItem_con2Item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 90px;
    background-color: rgba(82, 178, 154, 0.09);
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .projectPortraitItem_con2ItemTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 90px;
    background: inherit;
    background-color: rgba(82, 178, 154, 1);
    border-radius: 3px;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: #FFFFFF;
    line-height: normal;
  }

  .projectPortraitItem_con2ItemSub {
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 120px);
  }

  .projectPortraitItem_con2ItemSubItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32%;

    .projectPortraitItem_con2ItemSubItemT1 {
      margin-bottom: 15px;
      display: flex;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 700;
      font-style: normal;
      color: #52B29A;
      font-size: 14px;
      letter-spacing: normal;
      line-height: normal;
    }

    .projectPortraitItem_con2ItemSubItemT2 {
      font-size: 14px;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: normal;
      color: #333333;
      line-height: normal;
    }
  }

  .projectPortraitItem_con2ItemSubIcon {
    width: 3%;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
    letter-spacing: normal;
    color: #333333;
    line-height: normal;
  }
}

.projectPortraitItem_con3Sub {
  border-radius: 3px;

  .projectPortraitItem_con3Table {
    padding: 4px;
    width: 100%;
    background: inherit;
    background-color: rgba(240, 135, 64, 1);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    line-height: normal;
    letter-spacing: normal;
  }

  .projectPortraitItem_con3TableData {
    display: grid;
    grid-template-columns: repeat();
    background: inherit;
    background-color: #FEF3EC;
  }

  .projectPortraitItem_con3TableDataItem {
    padding: 6px 0;
  }

  .projectPortraitItem_con3TableDataItemT1 {
    text-align: center;
    font-size: 14px;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #F08740;
    white-space: nowrap;
    text-transform: none;
  }

  .projectPortraitItem_con3TableDataItemT2 {
    text-align: center;
    margin-top: 8px;
    font-size: 14px;
    white-space: nowrap;
    text-transform: none;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
    line-height: normal;
  }
}

.structBox {
  border: 1px solid #dadada;
  border-top-width: 0;
  border-right-width: 0;

  .structBoxRow {
    //border-top: 1px solid #dadada;


    .child {
      border: 1px solid #dadada;
      border-bottom-width: 0;
      border-left-width: 0;
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
      height: 65px;
      padding: 5px 5px;
      //line-height: 60px;
      word-wrap: break-word;
      word-break: break-word;
      white-space: pre-line;
    }

    .structBoxTitle {
      background-color: #F2F2F2;
    }

    .structBoxValue {

    }

    .struct-content {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>